import { useEffect, useRef } from 'react'

function videoPage(props:any) {
  const {MultipleVideos} = props
  console.log(MultipleVideos,'MultipleVideos');
  
  const videoRef = useRef<HTMLVideoElement>(null)
  useEffect(() => {
    const onMouseOver = () => {
      if (videoRef.current) {
        videoRef.current.play()
      }
    }
    const onMouseOut = () => {
      if (videoRef.current) {
        videoRef.current.pause()
      }
    }
    const videoElement = videoRef.current
    if (videoElement) {
      videoElement.addEventListener('mouseenter', onMouseOver); // 更改这里
      videoElement.addEventListener('mouseleave', onMouseOut) // 更改这里
      return () => {
        videoElement.removeEventListener('mouseenter', onMouseOver) // 更改这里
        videoElement.removeEventListener('mouseleave', onMouseOut) // 更改这里
      }
    }
  }, [])
  return (
    <div>
      <div className='longPage'>
        <div className='longPage_img' >
          <video ref={videoRef} width={185} src={MultipleVideos.video}></video>
        </div>
        <div className='longPage_img_introduce'>
          <p>{MultipleVideos.msg} </p>
          <b style={{ display: 'block' }}>
            <span style={{ marginRight: '10px', color: '#ff69b4' }}>{MultipleVideos.avatar} </span>
            <span> {MultipleVideos.title}</span>
          </b>
        </div>
      </div>
    </div>
  )
}

export default videoPage
